import React, { useMemo, useState, useEffect } from 'react';
import { Modal, message, Button, Table, Input, Empty } from 'antd';
import Pagination from '@inbiz/basic/Pagination';
import { InbizIcon } from '@inbiz/utils';
import { TextWidget } from '@inbiz/react';
import { getSubProcessList } from '../../server';
import './style.less';

export default function SubProcessModal(props: any) {
    const { modalParams, handleSelected, selectedSubProcessKey } = props;
    const [processData, setProcessData] = useState<any[]>([]);
    const [loading, setLoading] = useState<boolean>(false);
    const [searchText, setSearchText] = useState<string>('');
    const [total, setTotal] = useState<number>(0);
    const [pageIndex, setPageIndex] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(10);
    const [selectedRows, setSelectedRows] = useState<any[]>(selectedSubProcessKey ? [{ key: selectedSubProcessKey }] : []);
    const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>(selectedSubProcessKey ? [selectedSubProcessKey] : []);

    const columns: any = useMemo(() => {
        return [
            {
                title: '流程名称',
                dataIndex: 'name',
                ellipsis: true,
            },
            {
                title: '分组名称',
                dataIndex: 'groupName',
                ellipsis: true,
            },
            {
                title: '版本',
                dataIndex: 'actReProcdefIdRev',
                width: '100px',
                ellipsis: true,
            },
        ]
    }, []);

    const onPageChange = (page: { current: number, pageSize: number }) => {
        setPageIndex(page?.current);
        setPageSize(page?.pageSize);
        setLoading(true);
        getSubProcessList({ searchContext: searchText, pageIndex: page?.current, pageSize: page?.pageSize }).then((res) => {
            if (res?.code == '200' && res?.details && res?.details?.rows && res?.details?.rows?.length) {
                setTotal(res?.details?.total);
                setProcessData(res?.details?.rows);
            } else {
                message.error(res?.message);
            };
            setLoading(false);
        }).catch((error) => {
            message.error(error);
            setLoading(false);
        })
    };

    const onSearchChange = (e: { target: { value: React.SetStateAction<string>; }; }) => {
        setSearchText(e?.target?.value);
    }

    const onSearch = () => {
        setLoading(true);
        getSubProcessList({ searchContext: searchText, pageIndex: 1, pageSize: 10 }).then((res) => {
            if (res?.code == '200' && res?.details && res?.details?.rows && res?.details?.rows?.length) {
                setTotal(res?.details?.total);
                setProcessData(res?.details?.rows);
            } else {
                setTotal(0);
                setProcessData([]);
            }
            setLoading(false);
        }).catch((error) => {
            message.error(error);
            setLoading(false);
        })
    };

    const handleSelect = (record: { key: string; }) => {
        setSelectedRows([record]);
        setSelectedRowKeys([record?.key]);
    }

    const onCancel = () => {
        modalParams?.onCancel && modalParams?.onCancel();
    };

    const onOk = () => {
        handleSelected(selectedRows?.[0]);
        modalParams?.onCancel && modalParams?.onCancel();
    }

    useEffect(() => {
        setLoading(true);
        getSubProcessList({ searchContext: '', pageIndex: 1, pageSize: 10 }).then((res) => {
            if (res?.code == '200' && res?.details && res?.details?.rows && res?.details?.rows?.length) {
                setTotal(res?.details?.total);
                setProcessData(res?.details?.rows);
            } else {
                message.error(res?.message);
            }
            setLoading(false);
        }).catch((error) => {
            message.error(error);
            setLoading(false);
        })
    }, []);

    return (
        <Modal
            {...modalParams}
            title='子流程'
            bodyStyle={{
                height: 460,
                padding: '10px 20px 20px 20px',
            }}
        >
            <div className='process-designer-sub-process'>
                <>
                    <div className='process-designer-sub-process-search'>
                        <Input
                            placeholder='请输入流程名称'
                            value={searchText}
                            onChange={onSearchChange}
                            suffix={
                                <InbizIcon
                                    type="icon-ic-sousuo"
                                    style={{ fontSize: '15px', color: '#d9d9d9' }}
                                    onClick={onSearch}
                                />
                            }
                            onPressEnter={onSearch}
                        />
                    </div>
                    <div className='process-designer-sub-process-table'>
                        <>
                            <Table
                                columns={columns}
                                dataSource={processData}
                                pagination={false}
                                size="small"
                                rowKey="key"
                                scroll={{ y: 253 }}
                                bordered
                                loading={loading}
                                rowSelection={{
                                    selectedRowKeys,
                                    type: 'radio',
                                    onSelect: (record) => {
                                        handleSelect(record);
                                    }
                                }}
                                onRow={(record: any) => {
                                    return {
                                        onClick: () => {
                                            handleSelect(record);
                                        },
                                    };
                                }}
                                locale={{
                                    emptyText: (
                                        <Empty
                                            image={Empty.PRESENTED_IMAGE_SIMPLE}
                                            description={<TextWidget>暂无数据</TextWidget>}
                                        />
                                    ),
                                }}
                            />
                            <Pagination
                                size='small'
                                options={[10, 20, 30, 40, 50]}
                                total={total}
                                current={pageIndex}
                                pageSize={pageSize}
                                onChange={onPageChange}
                                style={{ marginTop: 4, marginBottom: 4 }}
                            />
                        </>
                    </div>
                    <div className='process-designer-sub-process-footer'>
                        <div>
                            <Button onClick={onCancel}>取消</Button>
                            <Button type='primary' onClick={onOk}>确定</Button>
                        </div>
                    </div>
                </>
            </div>
        </Modal>
    );
};